
import * as React from 'react'
import { Modal, Collapse, Table, Row, Col } from 'antd'
const Panel = Collapse.Panel
interface Props {
  PHData: any
  PHVisible: boolean
  handleVisible: (flag: boolean) => void
}

class PullGoods extends React.Component<Props, any> {
  render() {
    const { PHData, PHVisible, handleVisible } = this.props
    const handleClose = () => {
      handleVisible(false)
    }
    let phList = PHData[0] || []
    let detail = PHData[1]?PHData[1][0]: {}
    let shopList = PHData[2] || []
    let totalMd = 0 
    let totalZc = 0
    let totalZxd = 0
    phList.map((row: any) => {
      totalMd+=row.shopqty
      totalZc+=row.storeqty
      totalZxd+=row.totalqty
    })
    const liStyle: any = {
      listStyle: "none",
      width: "20%",
      float: "left"
    }
    const tableFooter = () => {
      return (
        <ul style={{padding: "0"}}>
          <li style={{...liStyle, fontWeight: "bold"}}>总计</li>
          <li style={liStyle}>&nbsp;</li>
          <li style={{...liStyle, paddingLeft: "12px"}}>{totalMd}</li>
          <li style={{...liStyle, paddingLeft: "16px"}}>{totalZc}</li>
          <li style={{...liStyle, paddingLeft: "26px"}}>{totalZxd}</li>
        </ul>
      )
    }
    const phcolumns=[
      {
        title: '颜色',
        dataIndex: 'colour',
        key: 'colour',
        width:"40px"
      },
      {
        title: '尺码',
        dataIndex: 'size',
        key: 'size',
        width:"40px"
      },
      {
        title: '门店数量',
        dataIndex: 'shopqty',
        key: 'shopqty',
        width:"40px"
      },
      {
        title: '总仓数量',
        dataIndex: 'storeqty',
        key: 'storeqty',
        width:"40px"
      },
      {
        title: '总下单量',
        dataIndex: 'totalqty',
        key: 'totalqty',
        width:"40px"
      },
    ]
    const detailColums = [
      {
        title: '门店',
        dataIndex: 'shopid',
        key: 'shopid',
        width:"40px"
      },{
        title: '门店系数',
        dataIndex: 'shoprate',
        key: 'shoprate',
        width:"40px"
      },{
        title: '颜色',
        dataIndex: 'colourname',
        key: 'colourname',
        width:"40px"
      },{
        title: '尺码',
        dataIndex: 'sizeid',
        key: 'sizeid',
        width:"40px"
      },{
        title: '尺码系数',
        dataIndex: 'sizerate',
        key: 'sizerate',
        width:"40px"
      },{
        title: '数量',
        dataIndex: 'repqty',
        key: 'repqty',
        width:"40px"
      }
    ] 
    return (
      <Modal width={700} title="预览铺货数据" visible={PHVisible} footer={null} onCancel={handleClose}>
      <Table 
        dataSource={phList}  
        columns={phcolumns} 
        footer={tableFooter}/>
        <Collapse style={{marginTop: '10px', border: 'none',backgroundColor: '#ffffff'}}>
          <Panel header="参数信息" key="1">    
            {detail?(<div><Row>
              <Col span={8}>风格：{detail.dlid}</Col>
              <Col span={8}>品类：{detail.xlid}</Col>
              <Col span={8}>颜色数：{detail.colourcnt}</Col>
            </Row>
            <Row>
              <Col span={8}>商品类型：{detail.sptype}</Col>
              <Col span={8}>铺货类型：{detail.disbtype}</Col>
              <Col span={8}>版型：{detail.VERSION}</Col>
            </Row>
            <Row>
              <Col span={8}>季节：{detail.season}</Col>
              <Col span={8}>季节系数：{detail.seasonrate}</Col>
              <Col span={8}>基准数：{detail.baseqty}</Col>
            </Row>
            <Row>
              <Col span={8}>合计数：{detail.sumqty}</Col>
              <Col span={8}>刷新时间：{detail.stime}</Col>
            </Row></div>):'没有数据'}
          </Panel>
          <Panel header="明细信息" key="2">
            <Table dataSource={shopList}  columns={detailColums} />
          </Panel>
        </Collapse>
      </Modal>
    )
  }
}

export default PullGoods